<template>
  <nf-grid
    v-grid-drag="gridMeta"
    :dataList="dataList"
    v-bind="gridMeta"
    :selection="selection"
  >
  </nf-grid>
</template>

<script lang="ts">
  import { defineComponent, reactive, watch } from 'vue'
  import { createDataList } from '@naturefw/ui-core'
  import _gridMeta from '../../grid/grid.json'
  import _formMeta from '../../form/form.json'
 
 
  export default defineComponent({
    name: 'nf-elp-grid-page',
    directives: {
    },
    components: {
    },
    props: {
      selection: Object,
      pagerInfo: Object,
      active: Object,
      moduleID: { // 模块ID
        type: [Number, String],
        default: 1 
      }
    },
    setup(props) {
      // 获取表单控件需要的meta
      const gridMeta = reactive(_gridMeta)
      // 改为插槽
      // formMeta.itemMeta[101].controlType = 1
      
      // 根据 meta 创建表单的 model
      const _dataList = createDataList(_formMeta.itemMeta, props.pagerInfo.count).reverse()

      // 绑定控件的列表
      const dataList = reactive([])
      // 监听页号，设置列表数据
      watch(() => props.pagerInfo.pageIndex, (index) => {
        // console.log(index)
        dataList.length = 0
        const cpp = (props.pagerInfo.pagerIndex - 1) * props.pagerInfo.pagerSize
        for(let i=0; i< props.pagerInfo.pagerSize; i++) {
          dataList.push(_dataList[cpp + i])
        }
      })

      setTimeout(() => {
        for(let i = 0; i< props.pagerInfo.pagerSize; i++) {
          dataList.push(_dataList[i])
        }
      }, 1)
      
      return {
        dataList,
        gridMeta
      }
    }
  })
  
 
 

</script>